{{define "detail"}}
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>{{.Name}}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../static/layui/css/layui.css" />
        <link rel="stylesheet" href="../../static/articles/detail.css" />
        <link rel="stylesheet" href="../../static/default/modal.css" />
        <link rel="stylesheet" href="../../static/iconfont.css" />
        <link rel="icon" href="../../static/images/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="../../static/assets/waifu1.css"/>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="../../static/layui/layui.js"></script>
        <script>
            $(document).ready(function(){
               
               $("body").ready(function(){
                   var w=parseInt(document.body.clientWidth)+"px";
                   var h=parseInt(document.body.clientHeight)+"px"
                  $("#nav").css("width",w);
                  $("#main").css({"width":w,});
                  //$("#main").css({"width":w,"min-height":h});
               });
                
               $(window).resize(function(){
                var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
              
            });
        </script>
    </head>
    <body>
        {{template "navigate"}}
        <div id="main">
            <div id="artcile">
                <!--标题-->
                <div id="arthead" class="ctx">
                    <div id="title">
                        <h1>{{.Name}}</h1>
                    </div>                    
                    <div id="info" class="ctx">
                        <p>
                            <span>作者：{{.Author}}</span>
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            <span>分类：{{.Classify}}</span>
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            <span>标签：{{.Tag}}</span>
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            <span>日期：{{.CreateTime}}</span>
                        </p>
                    </div>
                </div>
                
                <div id="content">
                    <div id="textbody">
                        {{.ContentHTML}}
                    </div>
                   
                </div>
                <div class="artfoot">
                    <i class="layui-icon layui-icon-read">
                        <span class="likenum">{{.Click}}</span>
                        <i class="artid" style="display: none;">{{.ID}}</i>
                    </i>
                    <!--<a>评论(0)</a>-->
                    <i class="layui-icon layui-icon-heart like">
                        <span class="likenum">{{.Like}}</span>
                        <i class="artid" style="display: none;">{{.ID}}</i>
                    </i>
                   
                </div>
                <div class="clearfloat"></div>
            </div>
            
            <!--看板娘-->
            <div>
                {{template "kanbanniang"}}
            </div>
        </div>
    </body>
    <footer>
        {{template "footer"}}
    </footer>
    <script>
        layui.use(['element','layer'],function(){
            var element = layui.element;
            var layer=layui.layer;
            //点赞
            $(".like").on("click", function() {
                      var like=$(this);
                      var sp= like.find('i');
                      var num=parseInt(sp.text());
                      var strurl='/article/like?id='+num;
                      var loading = layer.msg('加载中...', {icon: 16, shade: 0.3, time:0});
                    $.ajax({
                        type:'get',
                        url:strurl,
                        async:true,
                        success:function(data){
                            layer.close(loading);
                            if (data.code==1){
                                like.attr("class","layui-icon layui-icon-heart-fill like");
                                var splike= like.find('span');
                                var cnt=parseInt(splike.text())+1;
                                splike.text(cnt);
                                layer.msg(data.msg)
                                
                            }else if(data.code==0){
                                layer.open({
                                title: '提示',
                                content: data.msg,
                                });
                            } 
                        },
                        error:function(){
                            layer.close(loading); 
                            layer.open({
                                title: '服务器无响应',
                                content: "服务器跑到月球啦！！"
                            });
                        }
                    });
                      
                    
                });
        });
    </script>
</html>
{{end}}